<template>
    <div id="home">
      <Header></Header>
      <Swiper :swiper-url-list="swiperUrlList"></Swiper>
      <!--1.注意这里, 用 :swiperUrlList驼峰 或者swiper-url-list都可, 但是在原生DOM中,只能用小写 + 横线-->
      <Icons :iconUrlList="iconUrlList"></Icons>
      <Recommend :recUrlList="recUrlList"></Recommend>
      <Weekend :weekUrlList="weekUrlList"></Weekend>
    </div>
</template>

<script>
import Header from '@/components/home/components/Header'
import Swiper from '@/components/home/components/Swiper'
import Icons from '@/components/home/components/Icons'
import Recommend from '@/components/home/components/Recommend'
import Weekend from '@/components/home/components/Weekend'
import {mapState} from 'vuex'
export default {
  name: 'Home',
  components: {
    Header,
    Swiper,
    Icons,
    Recommend,
    Weekend
  },
  /*
  this.$http.get('/api')
    .then(res=> {
      res.data;
      res.status;
      res.statusText;
      res.headers;
      res.config;

    }).catch(err=> {
      err.data;
      err.status;
      err.statusText;
      err.headers;
      err.config;

      err.message; -----------1.独有的

    })
  */
  data () {
    return {
      swiperUrlList: [],
      iconUrlList: [],
      recUrlList: [],
      weekUrlList: [],
      lastCity: ''
    }
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getHomeInfo () {
      this.$http.get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSucc)
        .catch(this.getHomeInfoFail)
    },
    getHomeInfoSucc (res) {
      // console.log(res.data)
      res = res.data // 1.res = {}
      if (res.ret && res.data) { // 2.res.data = {} 依然是一个对象
        const data = res.data // 3.data = res.data = {} JSON中的data对象
        // this.city = data.city // 4.data.city = '北京', JSON中的数据

        this.swiperUrlList = data.swiperUrlList
        // console.log(this.list)
        this.iconUrlList = data.iconUrlList
        this.recUrlList = data.recUrlList
        this.weekUrlList = data.weekUrlList
      }
    },
    getHomeInfoFail (err) {
      // console.log(err.message)
      alert(err.message)
    }
  },
  // template: '<Header/>' 此时template是忽略的,因为自身有template
  // 1.keep-alive 包裹的组件, 来回切换,说白了就是route-link的时候,不会触发mounted
  // 从而减少ajax的请求次数,提高性能
  // 2.但是与此同时,组件来回切换的时候(从city.vue-->home.vue)
  //   因为mounted不执行,仅仅this.city更新了,与之对应的首页内容 并未发生改变
  // 3.我的目的是让城市这个组件city.json进行换成, 而对index.json是要求更改内容的
  //   所以,这个时候activated派上用场了,
  // 4.为什么updated没有用?  update主要跟数据有关, 数据发生更改
  mounted () {
    // console.log('渲染之后')
    this.lastCity = this.city
    this.getHomeInfo()
  },
  // 1.activated区别于 updated---一定要有数据更新,视图才变化
  // 2.activated专门用于 被 keep-alive  [缓存的 组件] 激活时调用, 主要针对组件的切换
  // 3.事实证明,刷新页面的时候, 会触发mounted, updated
  //   但是组件切换的时候,没有发生任何数据更新, 所以updated不起作用
  activated () {
    // console.log('组件切换,渲染期间不触发')
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
  }
}
</script>

<style scoped>

</style>
